<%--
  每日合格率表
  Author: Ivan
--%>
<style type="text/css">
tr, th, td {
    text-align: center;
}
</style>

<div class="bjui-pageHeader">
    <form id="pagerForm" data-toggle="ajaxsearch"
          action="${request.getContextPath()}/Everydayqualified/everydayqualified" method="post">
        <div class="bjui-searchBar">
            <g:hiddenField name="SYS_QUERY_NAME" value="${SYS_QUERY_NAME}"/>
            <g:hiddenField name="EXPORT_CONTENT_NAME" value="Excel"/>
            <label>开始时间<strong><span class="text-danger">*</span></strong>：</label>
            <input type="text" name="startTime" class="form-control" data-rule="required"
                   data-toggle="datepicker" data-pattern="yyyy-MM-dd HH:mm:ss"
                   size="18" id="start-date-input" readonly value="${startTime}"/>&nbsp;
            <label>结束时间<strong><span class="text-danger">*</span></strong>：</label>
            <input type="text" name="endTime" class="form-control" data-rule="required"
                   data-toggle="datepicker" data-pattern="yyyy-MM-dd HH:mm:ss"
                   size="18" id="end-date-input" readonly value="${endTime}"/>&nbsp;
            <button type="submit" class="btn-default" data-icon="search">查询</button>&nbsp;
            <a type="button" class="btn btn-blue" href="${request.getContextPath()}/Everydayqualified/expExcel"
               data-toggle="doexport" data-confirm-msg="确定要导出吗？" data-icon="file-excel-o" title="导出Excel">导出</a>
        </div>
    </form>
</div>

<div class="bjui-pageContent tableContent">
    <g:if test="${reportList.size() > 0}">
        <div id="reportList" style="width: 96%; margin: auto;">
            <table data-toggle="tablefixed" data-width="100%" data-nowrap="true">
                <thead>
                <tr>
                    <th width="50">NO.</th>
                    <th width="100">日期</th>
                    <g:each in="${dateList}" status="i" var="headInstance">
                        <th width="100">${headInstance.TRANS_TIME}</th>
                    </g:each>
                </tr>
                </thead>
                <tbody>
                <g:each in="${reportList}" status="i" var="dataInstance">
                    <tr>
                        <td>${i + 1}</td>
                        <td>${dataInstance.CLAZZ}</td>
                        <g:each in="${dateList}" status="j" var="headInstance">
                            <td>${dataInstance[headInstance.TRANS_TIME]}</td>
                        </g:each>
                    </tr>
                </g:each>
                </tbody>
            </table>
        </div>

        <div style="width:96%;height:450px;margin: 20px auto;" id="everyDayQualifiedChart"></div>
    </g:if>
    <g:else>
        <g:render template="../template/emptyPanel"/>
    </g:else>
</div>
<g:render template="../template/unpagination"/>
<script type="text/javascript" src="${request.getContextPath()}/js/echarts/v4/echarts.min.js"></script>
<script type="text/javascript">
    var everyDayQualifiedChart = function () {
        var dateList = []
        <g:each in="${dateList}" var="headInstance">
        dateList.push("${headInstance.TRANS_TIME}");
        </g:each>
        var myChart = echarts.init(document.getElementById("everyDayQualifiedChart"));
        option = {
            title: {
                text: '每日合格率统计表'
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'cross',
                    label: {
                        backgroundColor: '#6a7985'
                    }
                }
            },
            legend: {
                data: ['修正率', '熔融合格率', '熔融一次合格率']
            },
            toolbox: {
                feature: {
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    name: '日期',
                    show: true,
                    type: 'category',
                    boundaryGap: false,
                    data: dateList,
                    axisLabel: {
                        rotate: 25,
                        show: true
                    }
                }
            ],
            yAxis: [
                {
                    name: '合格率',
                    type: 'value'
                }
            ],
            series: [
                <g:each in="${reportChart}" var="dataInstance">
                <g:if test="${dataInstance.CLAZZ == '修正率'}">
                {
                    name: '${dataInstance.CLAZZ}',
                    type: 'line',
                    stack: '总量',
                    data: [
                        <g:each in="${dateList}" status="j" var="headInstance">
                        <g:if test="${dataInstance[headInstance.TRANS_TIME] == null}">0, </g:if>
                        <g:else>${dataInstance[headInstance.TRANS_TIME]}, </g:else>
                        </g:each>
                    ]
                },
                </g:if>
                </g:each>
                <g:each in="${reportChart}" var="dataInstance">
                <g:if test="${dataInstance.CLAZZ == '熔融合格率'}">
                {
                    name: '${dataInstance.CLAZZ}',
                    type: 'line',
                    stack: '总量',
                    data: [
                        <g:each in="${dateList}" status="j" var="headInstance">
                        <g:if test="${dataInstance[headInstance.TRANS_TIME] == null}">0, </g:if>
                        <g:else>${dataInstance[headInstance.TRANS_TIME]}, </g:else>
                        </g:each>
                    ]
                },
                </g:if>
                </g:each>
                <g:each in="${reportChart}" var="dataInstance">
                <g:if test="${dataInstance.CLAZZ == '熔融一次合格率'}">
                {
                    name: '${dataInstance.CLAZZ}',
                    type: 'line',
                    stack: '总量',
                    data: [
                        <g:each in="${dateList}" status="j" var="headInstance">
                        <g:if test="${dataInstance[headInstance.TRANS_TIME] == null}">0, </g:if>
                        <g:else>${dataInstance[headInstance.TRANS_TIME]}, </g:else>
                        </g:each>
                    ]
                },
                </g:if>
                </g:each>
            ]
        };
        myChart.setOption(option, true);
    }

    $(function () {
        <g:if test="${reportList.size() > 0}">
        everyDayQualifiedChart();
        </g:if>
    });
</script>